<template>
    <div>
        <van-nav-bar title="忘记密码" left-arrow @click-left="onClickLeft" />
        <van-form @submit="onSubmitCode">
            <van-cell-group inset>
                <van-field v-model="phoneCode" name="手机号" label="手机号" placeholder="手机号" :rules="[
                    { required: true, message: '请填写手机号' },
                    { pattern: /^1[3-9]\d{9}$/, message: '手机号格式不正确' }
                ]" />

            </van-cell-group>
            <van-cell-group inset>
                <van-field v-model="code" center clearable label="短信验证码" placeholder="请输入短信验证码">
                    <template #button>
                        <van-button size="small" type="primary" :disabled="disabled" @click="btnCode">{{ getCode
                            }}</van-button>
                    </template>
                </van-field>
            </van-cell-group>
            <van-cell-group inset> <van-field v-model="password" type="password" name="密码" label="密码" placeholder="密码"
                    :rules="[
                        { required: true, message: '请填写密码' },
                        { pattern: /^[a-zA-Z0-9]{6,12}$/, message: '密码格式不正确' }
                    ]" /></van-cell-group>
            <van-cell-group inset> <van-field v-model="verify" name="确认密码" label="确认密码" placeholder="确认密码" :rules="[
                { required: true, message: '请填写密码' },
                { pattern: /^[a-zA-Z0-9]{6,12}$/, message: '请确认密码' }
            ]" /></van-cell-group>

            <div style="margin: 16px;">
                <van-button round block type="primary" native-type="submit">
                    提交
                </van-button>
            </div>
        </van-form>

    </div>
</template>
<script lang="ts" setup>
import { ref } from 'vue';
import instance from '../axios/index.ts';
import { useRouter } from 'vue-router';
import { showToast } from 'vant';
import { debounce } from '../utils/index.ts'
const router = useRouter();
const verify = ref('');//确认密码
const password = ref('');
const phoneCode = ref('');
const code = ref('');
const getCode = ref('获取验证码');
const disabled = ref(false)
const onClickLeft = () => history.back();
function getRandomValue() {
    const values = [1000, 2000, 3000, 4000, 5000, 6000, 7000, 8000, 9000, 10000];
    const randomIndex = Math.floor(Math.random() * values.length);
    return values[randomIndex];
}
// 点击发送验证码 
const btnCode = () => {
    if (phoneCode.value == '') {
        showToast('请输入手机号')
        return;
    } else {
        const data = {
            phone1: phoneCode.value
        }
        instance.post('/api/code', data).then((res) => {
            if (res.data.code === 200) {
                disabled.value = true
                let count = 30;
                getCode.value = `${count}秒后重发送`;
                const timer = setInterval(() => {
                    count--;
                    getCode.value = `${count}秒后重发送`;
                    if (count === 0) {
                        clearInterval(timer);
                        disabled.value = false
                        getCode.value = '获取验证码';
                    }
                }, 1000);
                setTimeout(() => {
                    showToast(res.data.data.yzm)
                    localStorage.setItem('code', res.data.data.yzm)
                    localStorage.setItem('token', res.data.data.token);
                    localStorage.setItem('user', res.data.data.name);
                    localStorage.setItem('img', res.data.data.img);
                    localStorage.setItem('phone', res.data.data.phone);
                    localStorage.setItem('id', res.data.data.id);
                }, getRandomValue());
            } else {
                showToast(res.data.message)
            }
        })
    }
}
// 修改密码 
const onSubmitCode = debounce(() => {
    if(password.value==verify.value){
        const data={
             id:localStorage.getItem('id'),
             password:password.value,
        }
        instance.post('/api/updatepassword', data).then((res) => {
            if (res.data.code === 200) {
                showToast('修改成功')
                router.push('/login')
            } else {
                showToast(res.data.message)
            }
        })
    }else{
        showToast('两次密码不一致')
    }
}, 1000)
</script>
<style scoped></style>